<template>
  <!-- <template #title> 新建知识库 </template> -->
  <ContentCard>
    <div class="wrap">
      <NodesOrgChart
        @clickTree="clickTree"
        :data="treeData"
        :baseName="storeName"
        style="margin-right: 10px"
      />
      <div class="main"><PreviewContent /></div>
      <!-- <a-layout-content>Content</a-layout-content> -->
    </div>
  </ContentCard>
</template>
<script setup lang="ts">
import {
  postknowledgeBase,
  getknowledgeBase
} from '@/apis/document/documentCenter/index';
import NodesOrgChart from './NodesOrgChart.vue';
import PreviewContent from './Preview.vue';

const route = useRoute();
const treeData = ref();
const storeName = route.query.storeName;
// const handleOk = async () => {
//   const res = await formRef.value.validate();
//   if (res) return;
//   emit('addKnowledgeBase', form);
//   close();
// };

let isCollapsed = ref(false); // 判断是否收起
const collapse = (collapsed: boolean) => {
  isCollapsed.value = collapsed;
};

const getData = async () => {
  try {
    const res = await getknowledgeBase({ storeName });
    treeData.value = res;
  } catch (err: unknown) {
    console.log(err);
  }
};

getData();

const clickTree = (res) => {
  console.log(res);
};
</script>

<style scoped lang="less">
.wrap {
  display: flex;
}

.main {
  height: 700px;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

// .main {
//   // width: 1440px;
//   height: 622px;
//   display: flex;
//   flex-direction: column;
//   flex: 1;
//   overflow: auto;
//   .top {
//     padding: 0 20px;
//     display: flex;
//     justify-content: space-between;
//     align-content: center;
//     .left {
//       min-width: 350px;
//       display: flex;
//       align-content: center;
//     }
//   }
// }
</style>
